<template>
  <div class="oe-role-management" v-loading="loading">
    <topTip :showBack="false"></topTip>
    <div class="role-management-list">
      <div class="role-list-top clearfix">
        <!-- <span>考试名称：</span> -->
     
          <a-input class="oe-jiankao-input" v-model="name" placeholder="请输入考试名称">
            <template #prefix>
              <span class="iconfont icon-sousuo"></span>
            </template>
          </a-input>
        <a-button class="chaxun" type="primary" @click="getList">查询</a-button>
      
      </div>
      <div class="role-list-table">
        <a-table
          @change="onSelectChange"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
        >
          <template slot="operation" slot-scope="text, record">
            <span style="cursor: pointer;">
              <a-divider type="vertical" />
                <!-- <a-tooltip placement="bottom" title="监考详情  (补考发布后,才可以看到补考的监考学生)"> -->
                <span @click="getMem(record)" class="action-icon"><i class="iconfont icon-chakan"><span>监考详情</span></i></span>
              <!-- </a-tooltip> -->
            </span>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal title=   "分配考生试卷类型" class="oe-select-block" :visible="choice" @cancel="choice = false" :footer="null">
      <span class="oe-block-btn" @click="choicePaper(0)">
        正式卷
      </span>
      <span class="oe-block-btn" @click="choicePaper(1)">
        补考卷
      </span>
    </a-modal>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  components: {
    topTip
  },
  mixins: [GetOperationList],
  data() {
    return {
      name: '',
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getList();
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getList();
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      data: [],
      columns: [
        { title: '序号', dataIndex: 'key', width: '5%', align: 'center' },
        { title: '考试名称', dataIndex: 'Title', width: '12%',align: 'center' },
        { title: '批次名称', dataIndex: 'BatchName', width: '12%',align: 'center' },
        { title: '分类名称', dataIndex: 'SortName', width: '12%', align: 'center' },
        { title: '开始时间', dataIndex: 'StartTime', ellipsis: true, align: 'center'},
         { title: '结束时间', dataIndex: 'EndTime', ellipsis: true, align: 'center'},
         { title: '正式考试人数', dataIndex: 'MonitorStuCount', ellipsis: true, width: '13%', align: 'center' },
         { title: '补考人数', dataIndex: 'RepairMonitorStuCount', ellipsis: true, width: '10%', align: 'center' },
        { title: '操作', dataIndex: 'operation', width: '20%', scopedSlots: { customRender: 'operation' }, align: 'center' }
      ],
      loading: false,
      // 操作List
      operationList: [],
      // 、操作list
      IsOpList: [],
      choice: false,
      examId: ''
    };
  },
  mounted() {
    this.getOpeartion();
  },
  methods: {
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              this.operationList.push(item.Name);
            });
            this.IsOpList = rst.list;
            // this.operationList = rst.list;
          }
          this.getList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 判断是否是只读
    getIsWrite(type) {
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限！');
          return false;
        } else {
          return true;
        }
      }
    },
    choicePaper(examType){
      this.choice = false;
       let newPage = this.$router.resolve({
          name: 'proctorManageOne',
          params: {
            examid: this.examId,
            paperType: examType
          }
        });
        window.open(newPage.href, '_blank');
    },
    getMem(data) {
      if (!this.getIsWrite('监考')) {
        return;
      }
      this.examId = data.Id;
      this.loading = true;
      this.$http
        .post('/api/examMonitor/report/getExamType', {
          examId: this.examId
        })
        .then((res) => {
          this.loading = false;
          if(res.setTime == 1){
            this.choice = true;
          }else{
            this.choicePaper(0);
          }
        });
    },
    getList() {
      this.loading = true;
      this.$http
        .post('/api/examMonitor/report/getExamList', {
          pageSize: this.pagination.pageSize,
          page: this.pagination.current,
          examName: this.name
        })
        .then((res) => {
          this.loading = false;
          this.data = res.list;
          this.pagination.total = res.pagination.totalCount;
          for (let i = 0; i < res.list.length; i++) {
            this.data[i].key = i + 1;
          }
        });
    }
  }
};
</script>
